.float-widget.transfer-progress * {
    font-family: var(--text-font-family);
}
.float-widget.transfer-progress {
    height: auto;
    margin-bottom: 8px;
    position: relative;
    z-index: 110;
}
.transfer-progress-widget,
.banner.transfer {
    position: relative;
    border-radius: 16px;
    box-shadow: var(--dialog-shadow);
    overflow: hidden;
}
.transfer-progress-widget.collapse {
    display: inline-block;
    min-width: 264px;
    max-width: 446px;
}
.transfer-progress-widget.expand {
    width: 536px;
    background: var(--surface-main);
}
.transfer-progress-txt {
    font: var(--text-body1-bold);
    color: var(--text-color-high);
    display: inline-block;
    padding: 5px 0 4px;
    vertical-align: top;
    margin-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.transfer-panel-title .transfer-progress-txt {
    color: var(--text-color-high);
}
.transfer-progress-type.error .transfer-progress-txt,
.transfer-progress-type.overquota .transfer-progress-txt {
    font-family: var(--text-font-family);
    color: var(--secondary-red);
}
.transfer-progress-type.error.almost-overquota .transfer-progress-txt {
    color: var(--secondary-orange);
}
/* Transfer tooltips - head */
.transfer-progress-head {
    display: flex;
    min-width: 264px;
    max-width: inherit;
    position: relative;
    width: auto;
    border-radius: 16px 16px 0 0;
    background: var(--surface-grey-1);
    font-size: 0;
}
.transfer-progress-widget.expand .transfer-progress-head {
    min-width: 536px;
}
.transfer-progress-widget.collapse .transfer-progress-head {
    border-radius: 8px;
}
.transfer-progress-type {
    margin: 10px 0;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    align-self: flex-start;
}
.transfer-progress-spacing {
    flex-grow: 1;
}
.transfer-progress-widget.expand .transfer-progress-type.upload.hidden + .transfer-progress-type.download,
.transfer-progress-widget.expand .transfer-progress-type.upload:not(.hidden) {
    margin-left: 24px;
}
.transfer-progress-widget.collapse .transfer-progress-type.upload.hidden + .transfer-progress-type.download,
.transfer-progress-widget.collapse .transfer-progress-type.upload:not(.hidden) {
    margin-left: 16px;
}
.transfer-progress-type:nth-child(1) {
    margin-right: 32px;
}
.transfer-progress-type .progress-chart {
    width: 28px;
    height: 28px;
    transform: none;
    display: inline-block;
    float: none;
    vertical-align: middle;
    background: var(--surface-progress-background);
    border-radius: 100%;
    position: relative;
}
.transfer-progress-type .progress-chart .charts {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 100%;
    position: absolute;
}
.transfer-progress-type .progress-chart i {
    top: 6px;
    left: 6px;
    z-index: 11;
    position: absolute;
}
.transfer-progress-type.download .progress-chart i {
    --mask-color: var(--secondary-green);
}
.transfer-progress-type.upload .progress-chart i {
    --mask-color: var(--secondary-blue);
}
.transfer-progress-type.error .progress-chart i,
.transfer-progress-type.overquota .progress-chart i {
    --mask-color: var(--stroke-error);
}
.transfer-progress-type .progress-chart::after {
    width: 22px;
    height: 22px;
    margin: 3px;
    content: "";
    display: block;
    position: absolute;
    padding: 0;
    border-radius: 100%;
    z-index: 10;
    background: var(--surface-main);
}
.transfer-progress-head .transfer-progress-type .progress-chart::after {
    background: var(--surface-grey-1);
}
.transfer-progress-type .charts .right-chart {
    width: 100%;
    height: 100%;
    position: absolute;
    clip: rect(0, 50px, 100px, 0);
}
.transfer-progress-type .charts .left-chart {
    width: 100%;
    height: 100%;
    position: absolute;
    clip: rect(0, 50px, 100px, 0);
}
.transfer-progress-type .charts .right-chart.low-percent-clip {
    clip: rect(0, 14px, 28px, 0);
}
.transfer-progress-type .charts .left-chart.low-percent-clip {
    clip: rect(0, 28px, 28px, 14px);
}
.transfer-progress-type .charts span {
    transform: rotate(180deg);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
}
.transfer-progress-type .charts span::before {
    width: 50%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
}
.transfer-progress-type.upload .charts span::before {
    background: var(--secondary-blue);
}
.transfer-progress-type.download .charts span::before {
    background: var(--secondary-green);
}
.transfer-progress-type .charts .left-chart span::before {
    margin-left: 50%;
}
.transfer-progress-type.error .charts span::before,
.transfer-progress-type.error .charts span::after,
.transfer-progress-type.overquota .charts span::before,
.transfer-progress-type.overquota .charts span::after {
    background: var(--stroke-error);
}
.transfer-panel-title .transfer-progress-type {
    margin: 0 16px;
 }
.status-indicator {
    width: auto;
    height: 28px;
    border-radius: 12px;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    vertical-align: top;
}
.transfer-progress-type.download .transfer-progress-pct::before,
.transfer-progress-type.upload .transfer-progress-pct::before {
    --icon-size: 16px;
    left: 4px;
    top: 4px;
    display: block;
    position: absolute;
    z-index: 11;
    --mask-color: var(--secondary-white);
}
.transfer-progress-type .transfer-progress-icon {
    display: none;
}
.transfer-progress-type.complete .transfer-progress-icon,
.transfer-progress-type.error .transfer-progress-icon,
.transfer-progress-type.overquota .transfer-progress-icon {
    display: inline-block;
    vertical-align: top;
}
.transfer-progress-pct {
    color:var(--text-color-white-high);
    font: var(--text-body1);
    position: relative;
    display: inline-block;
    padding: 4px 8px 4px 20px;
    line-height: 16px;
    width: auto;
    height: auto;
}
.transfer-progress-widget .transfer-control-panel {
    display: flex;
    align-self: flex-end;
    cursor: pointer;
}
.transfer-progress-widget.expand .transfer-control-panel {
    margin-right: 16px;
}
.transfer-progress-widget.collapse .transfer-control-panel {
    margin-right: 8px;
    margin-left: 32px;
}
.transfer-control-panel .transfer-progress-icon i {
    --icon-size: 24px;
    --mask-color: var(--icon-rest);
}
.transfer-control-panel .transfer-progress-icon i:hover {
    --mask-color: var(--icon-active);
}
.transfer-control-panel .transfer-progress-icon {
    margin: 12px 8px 12px 0;
    transition: 0.2s;
    display: inline-block;
}
.transfer-progress-widget.expand .transfer-progress-icon.expand,
.transfer-progress-widget.collapse .transfer-progress-icon.collapse {
    display: none;
}
.transfer-control-panel .transfer-progress-icon:hover {
    opacity: 1;
}
.transfer-progress-tabs-head {
    background: var(--surface-main);
    line-height: 32px;
    border-bottom: var(--stroke-grey-2) solid 1px;
}
.transfer-progress-tabs-head .transfer-tabs-panel {
    padding-left: 24px;
}
.transfer-progress-tabs-head .tab-lnk {
    font: var(--text-body2-bold);
    color: var(--text-color-high);
    cursor: pointer;
    background-color: transparent;
    border: 0;
    outline: 0;
    padding: 0;
    box-sizing: border-box;
    height: 24px;
    position: relative;
    margin: 8px 36px 6px 0;
}
.transfer-progress-tabs-head .tab-lnk.active {
    font: var(--text-body1-bold);
    color: var(--text-color-info);
}
.transfer-progress-tabs-head .tab-lnk.inactive {
    font: var(--text-body2);
    color: var(--text-color-low);
    cursor: default;
}
/* Transfer tooltips - body */
.transfer-progress-widget.collapse .transfer-progress-widget-body {
    display: none;
}
.transfer-progress-widget-body {
    position: relative;
    background: var(--surface-main);
    overflow: hidden;
    z-index: 40;
    max-height: 248px;
}
.transfer-progress.tpw .widget-body-container {
    min-height: 56px;
    max-height: 248px;
    overflow: hidden;
    position: relative;
}
.transfer-task-row {
    width: 100%;
    height: 48px;
    padding: 12px 16px 12px 24px;
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.transfer-task-row:hover::after {
    content: '';
    width: 504px;
    height: 40px;
    position: absolute;
    left: 16px;
    top: 4px;
    border-radius: 4px;
    background-color: var(--stroke-grey-3);
    border: 1px solid var(--stroke-grey-2);
    z-index: -1;
}
.transfer-task-row::before {
    content: "";
    left: 27px;
    top: 16px;
    width: 16px;
    height: 16px;
    display: block;
}
.transfer-task-row .item-type-icon {
    margin: 0 12px;
}
.transfer-task-row .transfer-filetype-txt {
    display: inline-block;
    max-width: 282px;
    font: var(--text-body1);
    line-height: 24px;
    color: var(--text-color-high);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.transfer-task-row.complete .transfer-filetype-txt {
    max-width: 282px;
}
.transfer-task-row .transfer-file-size {
    position: relative;
    display: inline-block;
    margin: 0 8px;
    padding-left: 12px;
    font: var(--text-body2);
    line-height: 24px;
    color: var(--text-color-low);
    vertical-align: top;
    white-space: nowrap;
}
.transfer-task-row .transfer-file-size::before {
    content: "";
    width: 1px;
    height: 16px;
    background-color: var(--stroke-grey-2);
    display: block;
    position: absolute;
    top: 4px;
    left: 0;
}
.transfer-task-status {
    font: var(--text-body1);
    line-height: 24px;
    min-width: 28px;
    min-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    margin-left: auto;
    margin-right: 8px;
    flex-shrink: 0;
    position: relative;
    color: var(--text-color-high);
}
.transfer-task-row.paused .transfer-task-status i {
    --icon-size: 24px;
    display: inline-block;
    margin-right: 8px;
    --mask-color: var(--icon-rest);
    vertical-align: middle;
}
.transfer-task-status span {
    display: inline-block;
    height: 24px;
    vertical-align: middle;
    box-sizing: border-box;
}
.transfer-task-actions {
    display: none;
    z-index: 25;
}
.transfer-task-row:hover .transfer-task-actions {
    display: inline-block;
    position: absolute;
    right: 24px;
    top: 9px;
}
.transfer-task-row:hover .transfer-task-status {
    display: none;
}
.transfer-task-actions button {
    display: inline-block;
    cursor: pointer;
    position: relative;
    outline: none;
}
.transfer-task-actions i {
    --mask-color: var(--icon-rest);
}
.transfer-task-actions i:hover {
    --mask-color: var(--icon-active);
}
.transfer-progress-bar,
.transfer-progress-bar-pct {
    position: absolute;
    display: block;
    width: 488px;
    height: 2px;
    border-radius: 1.5px;
    background: var(--surface-progress-background);
    left: 24px;
    bottom: 0;
    z-index: 8;
}
.transfer-task-row.upload .transfer-progress-bar-pct {
    width: 200px;
    background: var(--secondary-blue);
    left: 0;
    z-index: 9;
}
.transfer-task-row.download .transfer-progress-bar-pct {
    width: 200px;
    background: var(--secondary-green);
    left: 0;
    z-index: 9;
}
/* complete mode */
.transfer-task-row.complete .transfer-task-status {
    color: var(--stroke-success);
}
.transfer-complete-actions {
    display: none;
    position: absolute;
    right: 48px;
    z-index: 25;
}
.transfer-task-row:hover .transfer-complete-actions {
    display: inline-block;
}
.transfer-complete-actions button {
    display: inline-block;
    position: relative;
    margin-right: 8px;
    cursor: pointer;
    outline: none;
}
.transfer-complete-actions i {
    --mask-color: var(--icon-rest);
}
.transfer-complete-actions i:hover {
    --mask-color: var(--icon-active);
}
.transfer-task-row.complete .transfer-progress-bar {
    display: none;
}
/* error mode */
.transfer-task-row.error .transfer-progress-bar-pct,
.transfer-task-row.overquota .transfer-progress-bar-pct {
    width: 200px;
    background-color: var(--secondary-red);
    left: 0;
    z-index: 9;
}
.transfer-task-row.error .transfer-task-status,
.transfer-task-row.overquota .transfer-task-status {
    color: var(--secondary-red);
}
.transfer-task-row .transfer-task-status + i {
    display: none;
}
/* inqueue mode */
.transfer-task-row.inqueue .transfer-task-status + i {
    animation: rotate 1s infinite linear;
    display: block;
    margin: 4px 12px 0 0;
    opacity: 0.6;
    --icon-size: 22px;
    animation-timing-function: steps(8, end);
}
/* deploy icons */
.transfer-task-row.paused .transfer-task-status::before {
    display: block;
    background-position: -2px -37px;
}
.transfer-progress-icon.collapse {
    height: auto;
}
.transfer-progress-icon.wait {
    background-position: -195px -342px;
}
.transfer-progress-icon.complete {
    display: block;
    background-position: -160px -1697px;
}
.btn-icon.transfer-progress-btn:hover::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--button-hover);
    border-radius: 4px;
    left: 0;
    right: 0;
    z-index: -1;
}
button.btn-icon .transfer-progress-icon {
    --icon-size: 24px;
    display: inline-block;
}
.transfer-progress-type.upload .status-indicator::before {
    background-position: -8px -1804px;
}
.transfer-task-row.download::before {
    --mask-color: var(--secondary-green);
}
.transfer-task-row.upload::before {
    --mask-color: var(--secondary-blue);
}
.transfer-task-row.complete .transfer-task-status::before {
    display: block;
    background-position: -160px -1696px;
}
.transfer-task-row.error .transfer-task-status::before,
.transfer-task-row.overquota .transfer-task-status::before {
    display: block;
    background-position: -159px -1804px;
}
.transfer-widget-footer {
    width: 100%;
    height: 24px;
    padding: 6px 0;
    background-color: var(--stroke-grey-2);
    display: flex;
    justify-content: flex-end;
}
.transfer-widget-footer button {
    height: 24px;
    --height: 24px;
}
.transfer-widget-footer .transfer-clear-all-icon {
    margin-right: 18px;
    margin-left: 8px;
}
.transfer-widget-footer button.action span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.transfer-widget-footer button i {
    --mask-color: var(--icon-rest);
}
.transfer-widget-footer button:hover i {
    --mask-color: var(--icon-active);
}
.transfer-progress-widget.collapse .transfer-section-button {
    display: none;
}
/*overquota banner*/
.float-widget.transfer-progress .banner {
    width: 100%;
    min-width: 148px;
    max-width: 536px;
    background-color: var(--stroke-main);
    padding: 24px;
    margin-bottom: 4px;
    box-sizing: border-box;
    overflow: hidden;
}
.float-widget.transfer-progress .banner .close-over {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 16px;
    right: 16px;
    transition: 0.2s;
    cursor: pointer;
    z-index: 19;
}
.float-widget.transfer-progress .banner .close-over:hover {
    opacity: 0.8;
}
.float-widget.transfer-progress .banner .close-over .sprite-fm-mono {
    width: 24px;
    height: 24px;
    --mask-color: var(--icon-rest);
    --icon-size: 24px;
}
.left-section.circle-dashboard {
    width: 64px;
    height: 64px;
    margin: 12px 40px 0 16px;
    position: relative;
    display: inline-block;
    border-radius: 100%;
    box-sizing: border-box;
    text-align: center;
    vertical-align: top;
    background: var(--surface-progress-background);
}
.quota-info-pct-txt {
    font: var(--text-h3-bold);
    position: relative;
    margin-top: 20px;
    z-index: 11;
}
.float-widget.transfer-progress .banner.almost-overquota .quota-info-pct-txt,
.float-widget.transfer-progress .banner.almost-overquota .quota-info-pr-txt .quota-info-pr-txt-used {
    color: var(--secondary-orange);
}
.float-widget.transfer-progress .banner.overquota .quota-info-pct-txt,
.float-widget.transfer-progress .banner.overquota .quota-info-pr-txt .quota-info-pr-txt-used {
    color: var(--secondary-red);
}
.quota-info-pr-txt {
    font: var(--text-body2);
    color: var(--text-color-high);
    position: relative;
    margin: -24px -16px 0;
}
.quota-info-pr-txt .quota-info-pr-txt-used {
    font: var(--text-body1);
}
.quota-info-pr-txt.small-font {
    color: var(--text-color-medium);
}
.quota-info-pr-txt.small-font .quota-info-pr-txt-used {
    font: var(--text-body1);
}
.right-section.upgrade-block {
    width: calc(100% - 136px);
    display: inline-block;
}
.right-section.upgrade-block .head-title {
    color: var(--text-color-high);
    font: var(--text-h3-bold);
    left: 0;
    top: 0;
    padding: 0;
}
.right-section.upgrade-block .head-title span.pct-used {
    font: var(--text-h1-bold);
    color: var(--text-color-error);
}
.almost-overquota .right-section.upgrade-block .head-title span.pct-used {
    color: var(--text-color-warning);
}
.right-section.upgrade-block .head-title:hover {
    background-color: transparent;
}
.right-section.upgrade-block .head-title::before {
    display: none;
}
.right-section.upgrade-block .content-txt {
    padding-top: 4px;
    color: var(--text-color-medium);
}
.right-section.upgrade-block button {
    margin-top: 16px;
    display: inline-block;
    z-index: 14;
}
.quota-info-pct-circle ul,
.quota-info-pct-circle li,
.quota-info-pct-circle p,
.quota-info-pct-circle span {
    height: 64px;
    width: 64px;
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.quota-info-pct-circle .overlay {
    width: 54px;
    height: 54px;
    background-color: var(--stroke-main);
    position: absolute;
    display: block;
    left: 5px;
    top: 5px;
    border-radius: 100%;
    z-index: 10;
}
.pro .quota-info-pct-circle li:not(.no-red-dot),
.blog-new-full .quota-info-pct-circle ul li,
.sync .quota-info-pct-circle li,
.affiliate .quota-info-pct-circle li,
.pro .quota-info-pct-circle li:not(.no-red-dot),
.quota-info-pct-circle ul li {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    background: none;
}
.quota-info-pct-circle ul .right-c {
    clip: rect(0, 64px, 64px, 32px);
}
.quota-info-pct-circle ul .left-c {
    clip: rect(0, 32px, 64px, 0);
}
.quota-info-pct-circle ul .left-c p {
    transform: rotate(-180deg);
}
.quota-info-pct-circle ul .right-c p {
    transform: rotate(-30deg);
}
.quota-info-pct-circle ul li span {
    width: 32px;
    height: 64px;
    display: block;
}
.quota-info-pct-circle ul li.right-c span {
    border-top-left-radius: 32px;
    border-bottom-left-radius: 32px;
}
.quota-info-pct-circle ul li.left-c span {
    border-top-right-radius: 32px;
    border-bottom-right-radius: 32px;
    margin-left: 32px;
}
.float-widget.transfer-progress .banner.almost-overquota .quota-info-pct-circle ul span {
    background-color: var(--secondary-orange);
}
.float-widget.transfer-progress .banner.overquota .quota-info-pct-circle ul span {
    background-color: var(--secondary-red);
}
.float-widget.transfer-progress .transfer-task-row hr {
    display: none;
}
.float-widget.transfer-progress .transfer-task-row.complete hr {
    position: absolute;
    background: var(--surface-grey-2);
    width: 488px;
    height: 1px;
    right: 24px;
    display: block;
    border: none;
    bottom: -8px;
}

/*
 For the temporary usage, please remove it later.
 */
.float-widget.transfer-progress .btn-icon {
    background: none;
    padding: 0;
    border: none;
    outline: none;
    cursor: pointer;
}
